<template>
    <div>
        <div id="J1">
            <div id="J2">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>当前位置</el-breadcrumb-item>
                    <el-breadcrumb-item>养老服务管理系统</el-breadcrumb-item>
                    <el-breadcrumb-item>机构养老</el-breadcrumb-item>
                    <el-breadcrumb-item>机构管理</el-breadcrumb-item>
                    <el-breadcrumb-item>经费补贴</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!-- 多条件搜索框 -->
        <div id="J3">
            <div id="J4"> 
                <span>机构名称：</span>
                <!-- <el-input placeholder="请输入内容" v-model="fen.jigouId" :disabled="true" style="width:160px"></el-input>
                <el-button type="primary" style="margin-left: 10px;" @click.native="jingfeitankuang = true">选择</el-button> -->
                <el-select v-model="fen.jigouId" clearable>
                    <el-option v-for="xinxi in jigouname" :key="xinxi.noid" :label="xinxi.jigouname" :value="xinxi.noid"></el-option>
                </el-select>

                <span style="margin-left: 80px;">年度内盈亏状况：</span>
                <el-select v-model="fen.yingkui" clearable placeholder="请选择">
                    <el-option label="盈亏" value="0"></el-option>
                    <el-option label="收支平衡" value="1"></el-option>
                    <el-option label="亏损" value="2"></el-option>
                </el-select>

                <span style="margin-left: 50px;">经费补贴年度：</span>
                <el-date-picker v-model="fen.min" type="year" placeholder="选择年">
                </el-date-picker>&nbsp;&nbsp;--&nbsp;&nbsp;
                <el-date-picker v-model="fen.max" type="year" placeholder="选择年">
                </el-date-picker>
                <el-button type="primary" icon="el-icon-search" @click.native="onSubmit" style="margin-left: 50px;">搜索
                </el-button>
            </div>
        </div>
        <!-- 增删改查、分页、页面数据 -->
        <div id="J5">
            <div id="J6">
                <el-button type="success" plain @click.native="xinzeng">新建</el-button>
                <el-button type="primary" plain @click.native="chakan()">查看</el-button>
                <el-button type="warning" plain @click.native="xiugai">修改</el-button>
                <el-button type="danger" plain @click.native="shanchu">删除</el-button>
                <div id="J7">
                    <el-table border ref="multipleTable" :data="tableData" tooltip-effect="dark"
                        style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"> </el-table-column>
                        <el-table-column type="index" label="序号" width="120"></el-table-column> 
                        <el-table-column prop="jigouname" label="机构姓名" width="300"></el-table-column>
                        <el-table-column prop="niandu" :formatter="leaveTime" label="经费补贴年度" width="360">
                        </el-table-column>
                        <el-table-column prop="zongbutie" label="补贴总额（万元）" width="360" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="yingkui" label="年度内盈亏状况" width="360" show-overflow-tooltip>
                            <template slot-scope="scope">
                                {{scope.row.yingkui==0?'盈亏':''}}
                                {{scope.row.yingkui==1?'收支平衡':''}}
                                {{scope.row.yingkui==2?'亏损':''}}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-pagination @size-change="xianshi" @current-change="yema" :current-page="fen.dqNum"
                    :page-sizes="[5, 15, 20, 30]" :page-size="fen.xsNum"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 搜索机构弹框 -->
        <el-dialog title="机构名称" :visible.sync="jingfeitankuang" width="50%">
            <!-- <div id="soujigou"> -->
            机构名称:
            <el-input placeholder="请输入机构名称" v-model="fen.jigouId" clearable style="width: 200px" >
            </el-input>
            <span style="margin-left: 100px;">开办时间:</span>
            <el-date-picker  type="daterange" style="margin-left: 10px;" align="right"
                unlink-panels range-separator="至" start-placeholder="最早开办时间" end-placeholder="最晚开办时间">
            </el-date-picker>
            <br />
            行政划区:
            <el-cascader clearable  size="large" ></el-cascader>

            <!-- v-model="okk.jxingbanzhuti" -->
            <span style="margin-left: 140px;">兴办主体:</span>
            <el-select clearable style="margin-top: 30px; margin-left: 10px;" placeholder="请选择兴办主体">
                <el-option label="省级民政部门" value="0"></el-option>
                <el-option label="地市级民政部门" value="1"></el-option>
                <el-option label="县级民政部门" value="2"></el-option>
                <el-option label="仙镇人民政府(含地区办事处)" value="3"></el-option>
                <el-option label="街道办事处" value="4"></el-option>
                <el-option label="单位、企业或社会组织" value="5"></el-option>
                <el-option label="与境外合资、合作" value="6"></el-option>
                <el-option label="境外独资" value="7"></el-option>
                <el-option label="村委会" value="8"></el-option>
                <el-option label="居委会" value="9"></el-option>
                <el-option label="个人" value="10"></el-option>
            </el-select>
            <br />
            特困人员供养机构类型:
            <!-- v-model="okk.jtekunrenyuan" -->
            <el-select clearable placeholder="请选择" style="margin-top: 30px; margin-left: 10px;">
                <el-option label="农村特困人员供养服务机构(农村敬老院等)" value="0"></el-option>
                <el-option label="城市特困人员供养服务机构(福利院)" value="1"></el-option>
            </el-select>
            <!-- </div> -->
            <div id="jigoubiao">
                <el-table ref="multipleTable"  tooltip-effect="dark"
                    style="width: 100%; margin-top: 30px;" @selection-change="handleSelectionChange" border>
                    <el-table-column type="index" width="50" label="序号"></el-table-column>
                    <el-table-column prop="jname" label="机构名称" width="120"></el-table-column>
                    <el-table-column prop="jkaibanshijian" label="开办时间" width="130"></el-table-column>
                    <el-table-column prop="jxingzhengquhua" label="行政区划" width="130"></el-table-column>
                    <el-table-column prop="jtekunrenyuan" label="特困人员供养机构类型" width="230"></el-table-column>
                </el-table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="jingfeitankuang=false">取 消</el-button>
                <el-button type="primary" @click.native="jigouName" v-show="isAdd">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 新增修改信息模块 ------------------------------------------------------------>
        <el-dialog :title="isAdd?'新增信息':'修改信息'" :visible.sync="dialogFormVisible" :append-to-body="true">
            <el-form :model="jingfei" :inline="true" :rules="rules" ref="jingfei">

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="机构名称：" prop="jigouId" label-width="200">
                            <el-select v-model="jingfei.jigouId" clearable>
                                <el-option v-for="xinxi in jigouname" :key="xinxi.noid" :label="xinxi.jigouname" :value="xinxi.noid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年度：" prop="niandu">
                            <el-date-picker v-model="jingfei.niandu" type="year"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="年度內盈亏状况：" prop="yingkui">
                            <el-select v-model="jingfei.yingkui" clearable placeholder="请选择：">
                                <el-option label="盈亏" value="0"></el-option>
                                <el-option label="收支平衡" value="1"></el-option>
                                <el-option label="亏损" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="上年政府预算(万元)：" prop="nianduzhengfu" style="margin-left: 52px;">
                            <el-input v-model="jingfei.nianduzhengfu" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="政府财政预算安排运转经费(万元):" prop="caizhengjingfei">
                            <el-input v-model="jingfei.caizhengjingfei" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="建设补贴(万元)：" prop="jianshebutie" >
                            <el-input v-model="jingfei.jianshebutie"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="运营补贴(万元)：" prop="yunyingbutie" >
                            <el-input v-model="jingfei.yunyingbutie"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="设施设备补贴(万元)：" prop="sheshibutie" style="margin-top: 0px; margin-left: 72px;">
                            <el-input v-model="jingfei.sheshibutie"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="人员补贴(万元)：" prop="renyuanbutie">
                            <el-input v-model="jingfei.renyuanbutie"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="其他补贴(万元)：" prop="qitabutie">
                            <el-input v-model="jingfei.qitabutie"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 文件上传 -->
                <el-form-item label="免冠证件照："  prop="img" label-width="120px">
                    <img style="width: 170px;height: 200px;" :src="zp+jingfei.tupian" fit="fill">
                </el-form-item><br>

                <el-form-item label="免冠证件照：" prop="tupian" label-width="120px">
                    <el-upload
                    class="avatar-uploader"
                    action="http://upload-z1.qiniup.com"
                    :show-file-list="false"
                    :data="shuju"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" @click="getToken">
                    <i v-else class="el-icon-plus avatar-uploader-icon" @click="getToken"></i>
                    <div slot="tip" class="el-upload__tip"><span style="color: red;">*
                            </span>只能上传二寸免冠证件照片，jpg/png格式的文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item><br>
                <!-- 文件上传 -->


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="dialogFormVisible=false">取 消</el-button>
                <el-button type="primary" @click.native="addjingfei('jingfei')" v-show="isAdd">确 定</el-button>
                <el-button type="primary" @click.native="edijingfei" v-show="!isAdd">保 存</el-button>
            </div>
        </el-dialog>
        <!-- 查看模块------------------查看模块 -->
        <el-dialog title="查看" :visible.sync="chakanmokuai" :append-to-body="true">
            <el-form :model="jingfei" :inline="true" ref="jingfei">

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="机构名称：" prop="jigouId" label-width="200">
                            <el-select v-model="jingfei.jigouId" clearable  :disabled="true">
                                <el-option v-for="xinxi in jigouname" :key="xinxi.noid" :label="xinxi.jigouname" :value="xinxi.noid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年度：" prop="niandu">
                            <el-date-picker v-model="jingfei.niandu" type="year" disabled></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="年度內盈亏状况：">
                            <el-select v-model="jingfei.yingkui" clearable placeholder="请选择：" :disabled="true">
                                <el-option label="盈亏" value="0"></el-option>
                                <el-option label="收支平衡" value="1"></el-option>
                                <el-option label="亏损" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="上年政府预算(万元)：" prop="nianduzhengfu">
                            <el-input v-model="jingfei.nianduzhengfu" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="政府财政预算安排运转经费(万元):" prop="caizhengjingfei">
                            <el-input v-model="jingfei.caizhengjingfei" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="建设补贴(万元)：" prop="jianshebutie" >
                            <el-input v-model="jingfei.jianshebutie" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="运营补贴(万元)：" prop="yunyingbutie" >
                            <el-input v-model="jingfei.yunyingbutie" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="设施设备补贴(万元)：" prop="sheshibutie">
                            <el-input v-model="jingfei.sheshibutie" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="人员补贴(万元)：" prop="renyuanbutie">
                            <el-input v-model="jingfei.renyuanbutie" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="其他补贴(万元)：" prop="qitabutie">
                            <el-input v-model="jingfei.qitabutie" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 文件上传 -->
                <el-form-item label="免冠证件照："  prop="img" label-width="120px">
                    <img style="width: 170px;height: 200px;" :src="zp+jingfei.tupian" fit="fill">
                </el-form-item><br>
                <!-- 文件上传 -->



            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click.native="chakanmokuai=false">确 定</el-button>
            </div>
        </el-dialog>






    </div>
</template>

<script>
import axios from 'axios';
import moment from 'moment';
export default {
    methods: {
        chaxun() {
            axios.post("/chain-api/jingfeibutie/page", this.fen).then(res => {
                this.tableData = res.data.list;
                this.total = res.data.total;
            })
        },
        xianshi(a) {
            this.fen.xsNum = a;
            this.chaxun();
        },
        yema(a) {
            this.fen.dqNum = a;
            this.chaxun();
        },
        onSubmit() {
            this.fen.dqNum = 1;
            this.chaxun();
        },
        xinzeng() {
            this.isAdd = true;
            this.dialogFormVisible = true;
            this.jingfei.jigouId = '';
            this.jingfei.niandu = '';
            this.jingfei.yingkui = '';
            this.jingfei.nianduzhengfu = '';
            this.jingfei.caizhengjingfei = '';
            this.jingfei.jianshebutie = '';
            this.jingfei.yunyingbutie = '';
            this.jingfei.sheshibutie = '';
            this.jingfei.renyuanbutie = '';
            this.jingfei.qitabutie = '';
            this.jingfei.zongbutie = '';
            this.jingfei.tupian = '';
        },
        //查看
        chakan() {
            // console.log(this.multipleSelection);
            if (this.multipleSelection.length != 1) {
                this.$message.error("只能选择一条数据");
                this.chaxun();
            } else {
                this.chakanmokuai = true;
                let ids = this.multipleSelection[0].noid
                console.log(ids);
                ///chain-api/mystatic/123.jpg
                axios.get("/chain-api/jingfeibutie/"+ids).then(res => {
                    console.log("查看回显数据！！！！！");
                    console.log(res.data.data);
                    this.jingfei = res.data.data;
                    this.zongbutie == this.jingfei.jianshebutie + this.jingfei.yunyingbutie + this.jingfei.sheshibutie + this.jingfei.renyuanbutie + this.jingfei.qitabutie;
                })
            }
        },
        // let ids = this.multipleSelection[0].noid
        //新增
        addjingfei(jingfei) {
            this.$refs[jingfei].validate((valid) => {
                if (valid) {
                    console.log("新增的数据");
                    console.log(this.jingfei);
                    this.dialogFormVisible = false;
                    axios.post("/chain-api/jingfeibutie/addjingfei", this.jingfei).then(res => {
                        if (res.data.code) {
                            this.$message({
                                showClose: true,
                                message: "新增成功",
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                showClose: true,
                                message: "新增失败",
                            })
                        }
                        this.onSubmit();
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //修改
        edijingfei(){
            this.dialogFormVisible = false;
            axios.post("/chain-api/jingfeibutie/xiugaijingfei", this.jingfei).then(res=>{
                if (res.data.code) {
                    this.$message({
                        showClose: true,
                        message: "修改成功",
                        type:'success'
                    })
                }else{
                    this.$message({
                        showClose: true,
                        message:"修改失败"
                    })
                }
                this.onSubmit();
            })
        },
        //修改回显
        xiugai(){
            if (this.multipleSelection.length != 1) {
                this.$message.error("只能选择一条数据");
                this.chaxun();
            } else {
                this.isAdd = false;
                this.dialogFormVisible = true;
                let ids = this.multipleSelection[0].noid
                axios.get("/chain-api/jingfeibutie/"+ids).then(res => {
                    this.jingfei = res.data.data;
                })
            }
        },
        //批量删除
        shanchu(){
            if (this.multipleSelection.length == 0) {
                this.$message.error("请选择一条信息")
            }else{
                let ids = this.multipleSelection.map(value => value.noid)
                axios.post("/chain-api/jingfeibutie/dele",ids).then(res=>{
                    if (res.data.code>0) {
                        this.$message.success("批量删除成功")
                        this.chaxun()
                    }else{
                        this.$message.error("批量删除失败")
                        this.chaxun()
                    }
                })
            }
        },

        //左侧按钮
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(val);
        },

        //文件上传
        handleRemove(file, fileList) {
            console.log("handleRemove");
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log("handlePreview");
            window.open(file.response.url)
            console.log(file);
        },
        handleExceed(files, fileList) {
            console.log("handleExceed");
            this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        handleAvatarSuccess(res, file) {//成功，获得返回值：文件名
            console.log("handleAvatarSuccess");
            console.log(res.name);
            this.jingfei.tupian = res.name;
        },



        //七牛云上传文件
        handleAvatarSuccess(res, file) {
            console.log(res);//上传成功后返回值json{"hash":"FphhkBU4u7F36rDb58cqK3fCmloD","key":"testd705686f-d42a-4991-a55f-9b6479f65e55"}
            this.imageUrl = URL.createObjectURL(file.raw);
            this.jingfei.tupian=res.key;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
        
            return isJPG && isLt2M;
        },
        getToken(){
            axios.get("/chain-api/wenjianshangchuan/getToken/yanglaopics").then(res=>{
                this.shuju.token = res.data.data.token;
                this.shuju.key = res.data.data.fname;
                console.log(res);
            });
        },



        leaveTime(row, column, cellValue, index){//日期转换显示
            return moment(cellValue).format('YYYY');
        },
    },
    data() {
        return {
            fen: {
                jigouId: '',
                yingkui: '',
                min: '',
                max: '',

                dqNum: 1,
                xsNum: 5,
            },

            isAdd: true,
            //增改弹框
            dialogFormVisible: false,//取消
            //搜索机构弹框
            jingfeitankuang: false,
            //查看弹框
            chakanmokuai: false,


            //图片上传物件
            imageUrl: '',
            shuju:{
                key:"",
                token:""
            },
            zp:"http://rkagcso2x.hb-bkt.clouddn.com/",


            jingfei: {
                jigouId: '',//机构id 机构名称
                niandu: '',//经费补贴年度
                yingkui: '',//年度盈亏状况
                nianduzhengfu: '',//上年度政府预算（万元）
                caizhengjingfei: '',//政府财政预算安排运转经费（万元）

                jianshebutie: '',//建设补贴（万元）
                yunyingbutie: '',//运营补贴（万元）
                sheshibutie: '',//设施补贴（万元）
                renyuanbutie: '',//人员补贴（万元）
                qitabutie: '',//其他补贴（万元）

                zongbutie: '',//补贴总额（万元）
                tupian: '',//上传图片
                isDelete: '',//删除 0已删除，1未删除
                jigouname:'',
                
            },
            //上传文件
            fileList: [],
            //基本表的机构名
            jigouname: '',
            //页面总数
            total: 0,
            tableData: [{
                noid: '',
                jigouId: '',
                niandu: '',//经费补贴年度
                yingkui: '',//年度盈亏状况
                zongbutie: '',//补贴总额（万元）
            }],
            //左侧按钮
            multipleSelection: [],






            rules: {
                jigouId: [
                    { required: true, message: '请选择名称', trigger: 'change' }
                ],
                niandu: [
                    { required: true, message: '请选择年度', trigger: 'change' }
                ],
                yingkui: [
                    { required: true, message: '请选择年度内盈亏状况', trigger: 'change' }
                ],
                nianduzhengfu: [
                    { required: true, message: '请输入上年政府预算', trigger: 'blur' }
                ],
                caizhengjingfei: [
                    { required: true, message: '请输入政府财政预算安排运转经费', trigger: 'blur' }
                ],
                jianshebutie: [
                    { required: true, message: '请输入建设补贴', trigger: 'blur' }
                ],
                yunyingbutie: [
                    { required: true, message: '请输入运营补贴', trigger: 'blur' }
                ],
                sheshibutie: [
                    { required: true, message: '请输入设施设备补贴', trigger: 'blur' }
                ],
                renyuanbutie: [
                    { required: true, message: '请输入人员补贴', trigger: 'blur' }
                ],
                qitabutie: [
                    { required: true, message: '请输入其他补贴', trigger: 'blur' }
                ],
            },
            
        }
    },
    mounted() {
        this.chaxun();
        // 回显新增里面下拉框的机构名称
        axios.post("/chain-api/jingfeibutie/jibenbiao").then(res=>{
            this.jigouname = res.data
        })
    },

}
</script>

<style>
#J1 {
    padding-top: 15px;
}

#J2 {
    width: 1600px;
    height: 30px;
    padding-left: 10px;
    padding-top: 15px;
    margin: auto;
    background-color: rgb(255, 255, 255);
    /* box-sizing: border-box; */
}

#J3 {
    padding-top: 10px;
}

#J4 {
    width: 1600px;
    height: 60px;
    padding-left: 10px;
    padding-top: 45px;
    margin: auto;
    background-color: rgb(255, 255, 255);
}

#J5 {
    padding-top: 10px;
}

#J6 {
    width: 1585px;
    height: 630px;
    padding-left: 25px;
    padding-top: 45px;
    margin: auto;
    background-color: rgb(255, 255, 255);
}

#J7 {
    /* padding-left: 0px; */
    padding-top: 20px;
    margin: auto;
    background-color: rgb(255, 255, 255);
}

#J8 {
    width: 310px;
    height: 38px;
    /* background-color: red; */
    margin-left: 0px;
    margin-top: 0px;
}

#J9 {
    display: inline;
    width: 282px;
    height: 38px;
    /* background-color: blue; */
    margin-left: 195px;
    margin-top: 0px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>